<template>
    <div class="details">
        <x-header v-show="!isWeChar" class="income__header" title="产品详情">
            <div @click="goBack" slot="overwrite-left" class="details__header--img">
                <img slot="icon" class="go-back" src="~assets/x3/ico/goback1.png">
            </div>
        </x-header>
        <swiper loop auto :aspect-ratio="170/375" :list="thumbnail" :show-dots="false"></swiper>
        <div class="details__introduce">
            <div @click="test" class="weui-cell">
                <div class="vux-cell-bd vux-cell-primary">
                    <p>
                        <span class="details__number">¥{{saveInsure.indexData.minPrice}}
                            <!-- <span v-show="isShowSmallsize" class="details__number--smallsize">起</span> -->
                            <span v-show="saveInsure.indexData.isQuota==0" class="details__number--smallsize">起</span>
                        </span>
                    </p>
                </div>
                <div class="weui-cell__ft">
                    <div class="badge-value">
                        <span class="vertical-middle details__list--right">
                            <span v-show="saveInsure.indexData.baseStatus=='1'">承保年龄：
                                <span v-show="saveInsure.indexData.minMonth!=null&&saveInsure.indexData.minMonth>0">{{saveInsure.indexData.minMonth}}个月</span>
                                <span v-show="saveInsure.indexData.minMonth==0||saveInsure.indexData.minMonth==null">{{saveInsure.indexData.minAge}}&nbsp</span>-&nbsp{{saveInsure.indexData.maxAge}}周岁 </span>保障期限：{{saveInsure.indexData.maxDeadLine}}天
                        </span>
                    </div>
                </div>
            </div>
            <div v-html="saveInsure.indexData.detail" class="details__introduce--explain">
            </div>
        </div>

        <div class="details_sticky">
            <sticky :check-sticky-support="false" id="details_tabItems">
                <tab :line-width=2 custom-bar-width="80%" v-model="index">
                    <tab-item v-for="(item, i) in content_list" :key="i" :selected="selected_item === item">
                        <span @click="selectedTab(i)" style="display:block;width:100%;height: 100%;">{{item}}</span>
                    </tab-item>
                </tab>
            </sticky>
        </div>
        <div class="details__cards" id="details_card_image">
            <!-- 产品图片 -->
            <div>
                <!-- <span v-show="true" slot="content"></span> -->
                <img slot="header" :src="saveInsure.indexData.introduceUrl">
            </div>
            <div>
                <!-- <span v-show="true" slot="content"></span> -->
                <img slot="header" :src="saveInsure.indexData.schemeUrl">
            </div>
            <div>
                <!-- <span v-show="true" slot="content"></span> -->
                <img slot="header" :src="saveInsure.indexData.detailUrl">
            </div>
        </div>
        <!-- 投保选择 -->
        <div class="details__footer_sub">
            <div class="details__footer_sub_left">
                <!-- 智齿客服,为了加载不显示客服浮窗，class必须有zhiCustomBtn值，电话请加上 @click="onlineClick" -->
                <div class="service" @click="onlineClick"><img src="~assets/x3/service/old_service_zxkf.png"></div>
                <div><img src="~assets/x3/ico/share.png" @click="shareShow"></div>
            </div>
            <div @click="seleInsurePlan()" class="details__footer_details_rigth">
                立即投保
            </div>
        </div>
        <actionsheet v-model="isInsure" @on-click-mask="closeActionsheet"></actionsheet>
        <transition name="fade">
            <div v-show="isInsure" class="weui-actionsheet weui-actionsheet_toggle">
                <div class="weui-actionsheet__menu">
                    <div class="details__footer">
                        <group>
                            <cell>
                                <span slot="after-title">{{saveInsure.indexData.productCname}}</span>
                            </cell>
                            <group-title>保障方案</group-title>
                            <!-- <scroller lock-y :scrollbar-x="false"> -->
                            <div class="details__dialog--btnlist">
                                <checker v-model="selePlanId" radio-required default-item-class="details-item" selected-item-class="details-item-selected">
                                    <checker-item :value="item.planId" v-for="(item,i) in spPlans" :key="i" @click="selectPlan(item)">{{item.planName}}</checker-item>
                                </checker>
                            </div>
                            <!-- </scroller> -->
                            <div class="details__dialog--datatime">
                                <!-- <group-title>保障期限</group-title> -->
                                <datetime title="保障开始时间" v-model="PeriodDto.startDate" :start-date="dateTomorrow" :end-date="startEndEndData" @on-change="change" class="details__dialog--rangeTime"></datetime>

                                <datetime :format="immFormat" v-show="isImm&&immStartHour" title="即时投保" minute-row="{value}分" :min-hour="immStartHour" hour-row="{value}点" v-model="immData" class="details__dialog--rangeTime"></datetime>

                                <datetime :format="immFormat" v-show="isImm&&!immStartHour" title="即时投保" minute-row="{value}分" hour-row="{value}点" v-model="immData" class="details__dialog--rangeTime"></datetime>

                                <!-- 只读模式标签,设置开始或结束选择范围会自动取消只读功能 -->
                                <datetime title="保障结束时间" v-show="isYear" v-model="PeriodDto.endDate" :readonly="true" class="details__dialog--rangeTime" style="padding-right:27px;"></datetime>
                                <!-- 可选日期标签 -->
                                <datetime title="保障结束时间" v-show="!isYear" v-model="PeriodDto.endDate" :start-date="endStartData" :end-date="endEndData" @on-change="changeStartEndTime" class="details__dialog--rangeTime"></datetime>

                                <datetime v-model="birthTime" :start-date="sDate" :end-date="dateNow" title="被保人生日" v-show="isShowBirthTime" @on-change="changeBirTime" class="details__dialog--birthday "></datetime>

                                <x-input v-show="alertMsg!=''" :disabled='true' class="details__dialog--birthday details-alert">
                                    <div slot="label"><img slot="icon" style="width: 15px;" src="~assets/x3/ico/smal-1.png"> 小提示&nbsp : &nbsp{{alertMsg}}</div>
                                    <!-- <div slot="right">{{alertMsg}}</div> -->
                                </x-input>

                            </div>
                            <div class="details__btn">
                                <div class="details__leftbtn">
                                    ¥
                                    <span v-show="showPrice==''">{{selePlanPrice}}</span>
                                    <span v-show="showPrice!=''">{{showPrice}}</span>
                                    <span style="color: #003a7d;" v-show="saveInsure.indexData.isQuota==0">起</span>
                                </div>
                                <div :style="detailsStore.planQueryStyle" class="details__rightbtn" @click="goInsure">立即投保</div>
                            </div>
                        </group>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 微信遮罩提示 -->
        <div class="weChatShadeDiv" v-show="weChatShade" @click="shareHide">
            <img class="details__arrow" src="~assets/x3/share-it.png">
            <a href="JavaScript:void(0);" class="follow">
                <p>
                    请点击右上角<br>即可分享当前内容
                </p>
            </a>
        </div>
        <!-- 非微信分享选项 -->
        <!-- <actionsheet v-model="showBaiduShare"></actionsheet>
        <transition name="fade">
            <div v-show="showBaiduShare" class="weui-actionsheet weui-actionsheet_toggle">
                <div class="weui-actionsheet__menu">
                    <div class="details__weixinShare_title">
                        分享到：
                    </div>
                    <div class="details__weixinShare bdsharebuttonbox">
                        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    </div>
                </div>
            </div>
        </transition> -->

        <x-dialog v-model="isShowShare" class="share-Einv" hide-on-blur>
            <div class="share-div">
                <qrcode class="share-qrcode" :value="shopShareUrl" type="img"></qrcode>
                <div id="shop-share"></div>
            </div>
        </x-dialog>

    </div>
</template>

<script>
import share from 'src/common/share';
import "src/assets/share/share.min.css";
import "src/assets/share/jquery.share.min.js";
import {
    GroupTitle, XHeader, XInput, Swiper, Masker, Group, Cell, CellFormPreview, CellBox, Badge, XButton, Tab, TabItem,
    Sticky, Card, TransferDom, Actionsheet, Toast, Flexbox, FlexboxItem, Checker, CheckerItem, Datetime, Scroller, Qrcode, XDialog
} from "vux";
import { RouteUrl, Mutations, intervalTime, TypeInsurance, FooterShow, PopState, Url_Key } from "src/common/const";
// import "src/common/pdf/components/pdf";
import { mapState, mapActions } from "vuex";
import { RequestUrl } from "src/common/url";
import DateUtil from "src/common/util/dateUtil";
import SharePage from "src/js/sharePage"; //引入微信分享js
import onlineCustomerService from "src/js/onlineCustomerService";//引入在线客服js

export default {
    components: { GroupTitle, XHeader, XInput, Swiper, Masker, Group, Cell, CellFormPreview, CellBox, Badge, XButton, Tab, TabItem, Sticky, Card, TransferDom, Actionsheet, Toast, Flexbox, FlexboxItem, Checker, CheckerItem, Datetime, Scroller, Qrcode, XDialog },
    computed: mapState({
        user: "user",
        initUrl: "initUrl",
        dealUid: "dealUid",
        saveInsure: "saveInsure",
        abroadTravel: "abroadTravel",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        shareUuid: "shareUuid",
        isWeAuth: "isWeAuth",
        isInitData: "isInitData",
        shareData: "shareData",
        seleValue: "seleValue"
    }),
    filters: {
        planName(value) {
            if (typeof value != "undefined") {
                return value.substring(value.length - 3, value.length);
            } else {
                return value;
            }
        }
    },
    data() {
        return {
            immStartHour: 5,
            isImm: false,
            isSeleNowDay: true,
            immFormat: "HH",
            immData: "00",
            shopShareUrl: "",
            isShowShare: false,
            //详情数据
            details: "",
            //banner图片列表
            thumbnail: [
                {
                    url: "",
                    img: "",
                    title: ""
                }
            ],
            //选项卡列表
            content_list: ["产品介绍", "保障方案", "服务详情"],
            selected_item: "产品介绍",
            index: 0,
            // TravelAssistantBtn: true, //非旅行险
            // TravelAssistant: false, //非旅行险
            sDate: DateUtil.getDateyMdSubtract(intervalTime.YEAR), //投保开始时间
            dateNow: DateUtil.getNowDateStr_Ymd(), //投保结束时间
            dateTomorrow: DateUtil.getDateTomorrow(1), //明日时间
            // dateTomorrow2: DateUtil.getDateTomorrow(2), //明日时间
            dateEnd: "2099-01-01",//结束日期
            birthTime: "", //被保险人生日
            planList: [], //套餐计划
            isInsure: false,
            showBaiduShare: false, //是否显示百度分享选项
            weChatShade: false, //微信分享遮罩

            // new 
            spPlans: [],   //当先显示的计划列表 这边配置的
            // planLists: [],   //女神那边查询到的
            selePlanId: "",  //当前选择的计划id
            selePlanPrice: "", //当前显示的价格
            selePlanList: [],  //当前女神选择的计划
            dealineIsFixed: false,
            //保险期间信息
            PeriodDto: {
                startDate: DateUtil.getDateTomorrow(1),
                startHour: "0",
                endDate: "",
                endHour: "24"
            },
            endStartData: "",
            endEndData: "",
            isShowBirthTime: false,
            isYear: false,
            deadline: "",
            age: "0",
            goInsureStyle: "background:#003A7D;",
            isGoInsure: false,
            isShowSmallsize: true,
            startEndEndData: DateUtil.getDateTomorrow(200),
            nowTime: DateUtil.getNowDateStr_Ymd(),
            isShop: false,
            alertMsg: "",
            defaultAge: "",
            elePlan: {
                alertMsg: "",
                defaultAge: "",
                queId: "",
            },
            isGoQue: false,
            showPrice: "",
            deTime: DateUtil.getNowDateStr_Ymd()
        };
    },
    watch: {
        isInitData(cur, old) {
            if (cur) {
                //初始化分享
                this.initShare();
            }
        },
        isImm(cur, old) {
            if (cur) {
                this.getStartHour('init');
            }
        },
        spPlans(cur, old) {
            // if (cur.length == 1) {
            //     let max = cur[0].maxDeadLine;
            //     let min = cur[0].minDeadLine;
            //     if ((max - min) < 2) {
            //         this.isShowSmallsize = false;
            //     }
            // }
        },
        selePlanId(cur, old) {
            // debugger
            // this.queryPlan("plan");
            if (typeof (this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine) != "undefined") {
                if (this.isImm) {
                    this.endStartData = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, parseInt(this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine));
                } else {
                    this.endStartData = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, parseInt(this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine) - 1);
                }
            } else {
                if (this.isImm) {
                    this.endStartData = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, 1);
                } else {
                    this.endStartData = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, 0);
                }
            }
            if (this.detailsStore.seleSalePlan != "") {
                // debugger
                this.endEndData = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, this.detailsStore.seleSalePlan.maxDeadLine - 1);
            }
            // debugger
            let limitData = JSON.parse(this.detailsStore.productData[this.saveInsure.indexData.id]
            [this.selePlanId].salePlan.limitTerm);
            this.elePlan = limitData;
            if (typeof (limitData.showPrice) != "undefined" && this.$common.isNotEmpty(limitData.showPrice)) {
                this.showPrice = limitData.showPrice;
            } else {
                this.showPrice = "";
            }

            // if (typeof (limitData.queId) != "undefined" && this.$common.isNotEmpty(limitData.queId)) {
            //     let parm = {
            //         _this: this,
            //         id: limitData.queId,
            //         type: 1
            //     }
            //     this.$common.storeCommit(this, Mutations.FIND_BY_QUE_ID, parm);
            //     this.isGoQue = true;
            // } else {
            //     this.isGoQue = false;
            // }


            if (typeof (limitData.alertMsg) != "undefined") {
                this.alertMsg = limitData.alertMsg;
            } else {
                this.alertMsg = "";
            }
            if (typeof (limitData.defaultAge) != "undefined") {
                this.defaultAge = limitData.defaultAge;
            }
            // debugger
            if (this.detailsStore.seleSalePlan.ageRelated == "1" && (this.birthTime == "" || this.birthTime == DateUtil.getNowDateStr_Ymd()) && this.deTime == this.birthTime) {
                if (this.$common.isNotEmpty(this.defaultAge)) {
                    let _this = this;
                    this.birthTime = DateUtil.getBirAge(this.defaultAge);
                    setTimeout(() => {
                        // console.log(_this.birthTime);
                        _this.changeBirTime("");
                    }, 1000);
                }
            }
            this.change(this.PeriodDto.startDate);
        },
        selePlanPrice(cur, old) {
            if (cur != "") {
                this.isGoInsure = true;
                this.goInsureStyle = "background: #003a7d;";
            } else {
                this.isGoInsure = false;
                this.goInsureStyle = "background:#003A7D;";
            }

        }
    },
    methods: {
        test() {
            // alert(1);
            // this.$common.saveShare("test", this, "");
        },
        getStartHour(type) {
            let _this = this;
            // debugger

            let hour = DateUtil.getDataType(new Date().getTime(), "h");
            let m = DateUtil.getDataType(new Date().getTime(), "mm");
            hour = parseInt(hour)
            if (m > 30) {
                hour++;
            }
            if (hour == 23 && this.isSeleNowDay) {
                this.PeriodDto.startDate = DateUtil.getDateTomorrow(1);
                this.dateTomorrow = DateUtil.getDateTomorrow(1);
                // this.endStartData = DateUtil.getDateTomorrow(2);
                // this.isImm = false;
            } else if (this.isSeleNowDay) {
                this.PeriodDto.startDate = DateUtil.getDateTomorrow(0);
                this.dateTomorrow = DateUtil.getDateTomorrow(0);
                // this.endStartData = DateUtil.getDateTomorrow(1);
                hour++;
            }
            // debugger
            if (!this.isSeleNowDay) {
                this.immStartHour = 0;
                this.immData = 0 + ":00";
            } else {
                this.immStartHour = hour;
                if (_this.immData < hour) {
                    type = "init";
                }
            }
            if (type == "init") {
                // debugger
                setTimeout(() => {
                    _this.immData = hour + ":00";
                }, 500);
            }
            // this.immStartHour = hour;
            // let test = DateUtil.getDateTomorrow(0);
        },
        //根据URI参数初始化数据
        initURIParameters() {
            if (!this.saveInsure.isGetIndex) {
                // alert("details:" + window.location.href);
                let userCode = "liberty";
                if (this.user.isLogin) {
                    userCode = this.user.userDto.userCode;
                }
                let parm = { _this: this, url: window.location.href, userCode: userCode };
                this.$common.storeCommit(this, Mutations.SHARE_URL_SET, parm);
            }
        },
        seleInsurePlan() {
            this.isInsure = !this.isInsure;
            //选择投保方案的界面时禁用页面滚动
            $("body").css("overflow-y", "hidden");
        },
        closeActionsheet() {
            //选择投保方案的界面遮罩时启动页面滚动
            $("body").css("overflow-y", "auto");
        },
        //提交初始信息
        goInsure() {
            //进入投保信息录入
            if (this.isGoInsure && !this.detailsStore.isPlanQuery) {
                this.isInsure = false;

                if (typeof (this.saveInsure.eleShow.isAxtx) != "undefined" && this.saveInsure.eleShow.isAxtx) {
                    this.$common.goUrl(this, RouteUrl.INSURE_AXTX);
                } else {
                    if (this.saveInsure.isGoQue && this.seleValue.isSetQue) {
                        this.$common.goUrl(this, RouteUrl.QUESTIONNAIRE);
                    } else {
                        this.$common.goUrl(this, RouteUrl.INSURE);
                    }
                }
            }
        },
        //返回
        goBack() {
            if (this.isShop) {
                this.$common.goBackUrl(this, RouteUrl.SHOP_INDEX);
            } else if (this.$common.isEmpty(sessionStorage["DETAILS_FORM_URL"])) {
                this.$common.goBackUrl(this, RouteUrl.INSURANCE);
            } else {
                this.$common.goBackUrl(this, sessionStorage["DETAILS_FORM_URL"]);
            }
            // if(sessionStorage["DETAILS_FORM_URL"]==RouteUrl.INSURE||sessionStorage["DETAILS_FORM_URL"]==RouteUrl.INSURE_AXTX||sessionStorage["DETAILS_FORM_URL"]=="/"){
            //     this.$common.goBackUrl(this, RouteUrl.INSURANCE);
            // }
            // if (sessionStorage[SaveName.IS_SERVICE] == "T") {
            //     this.$common.goBack(this);
            // } else {
            // this.$common.goBackUrl(this, RouteUrl.INSURANCE);
            // if (localStorage["DETAILS_FORM_URL"] != "/" && localStorage["DETAILS_FORM_URL"] != RouteUrl.INSURE) {
            //     // this.$common.goBackUrl(this, RouteUrl.INSURANCE);
            //     this.$common.goBackUrl(this, localStorage["DETAILS_FORM_URL"]);
            // } else {
            //     this.$common.goBackUrl(this, RouteUrl.INSURANCE);
            //     // this.$common.goBackUrl(this, localStorage["DETAILS_FORM_URL"]);
            // }
            // }
        },
        //new //setData
        // new // new 
        saveData() {
            if (this.isImm) {
                let stList = this.immData.split(":");
                this.PeriodDto.startHour = stList[0];
                this.PeriodDto.endHour = stList[0];
            } else {
                this.PeriodDto.startHour = 0;
                this.PeriodDto.endHour = 24;
            }
            //组成投保信息需要的数据
            let parm = {
                selePlan: this.selePlanList,  //当前选择的plan
                periodDto: this.PeriodDto,   //Dto
                birthday: this.birthTime,     //生日 如果是旅行险需要带过去
            }
            this.$common.storeCommit(this, Mutations.SAVE_INSURE_DEFAULT_SAVE, parm);
            // 组成当前选择了哪些id数据
            let parmm = {
                // startHour: this.PeriodDto.startHour,
                // isImm: this.isImm,
                productId: this.saveInsure.indexData.id,
                seleId: this.selePlanId,
                startTime: this.PeriodDto.startDate,
                endTime: this.PeriodDto.endDate,
                birthday: this.birthTime,
                abroadTravel: this.abroadTravel,
                _this: this
            }
            this.$common.storeCommit(this, "DETAILSS_SAVE", parmm);
        },
        //投保开始日期选择
        change(value) {
            // debugger
            //立即投保
            if (this.isImm) {
                if (value == this.nowTime) {
                    this.isSeleNowDay = true;
                } else {
                    this.isSeleNowDay = false;
                }
                this.getStartHour();
            }
            //结束日期限制日期
            if (typeof (this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine) != "undefined") {
                if (this.isImm) {
                    this.endStartData = DateUtil.getDateAfterOfDay(value, parseInt(this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine));
                } else {
                    this.endStartData = DateUtil.getDateAfterOfDay(value, parseInt(this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine) - 1);
                }
            } else {
                if (this.isImm) {
                    this.endStartData = DateUtil.getDateAfterOfDay(value, 1);
                } else {
                    this.endStartData = DateUtil.getDateAfterOfDay(value, 0);
                }
            }

            if (this.detailsStore.seleSalePlan != "") {
                // this.endEndData = DateUtil.getDateAfterOfDay(value,
                this.endEndData = DateUtil.getDateAfterOfDay(value, this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.maxDeadLine - 1);
            }
            this.changeStartEndTime();
        },
        // new  //当结束日期修改的时候
        changeStartEndTime(value) {
            // debugger
            if (this.PeriodDto.startDate > this.PeriodDto.endDate) {
                this.PeriodDto.endDate = this.endStartData;
            }
            // debugger
            if (this.isImm && (this.PeriodDto.startDate == this.PeriodDto.endDate)) {
                this.PeriodDto.endDate = this.endStartData;
            }
            // if (this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].isYear) {
            //     // this.PeriodDto.endDate = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, this.detailsStore.curSelePlan.maxDeadLine);
            //     this.PeriodDto.endDate = DateUtil.getDateInsure(this.PeriodDto.startDate);
            // }
            // debugger
            try {
                // debugger

                let day = DateUtil.DateDiff(this.PeriodDto.startDate, this.PeriodDto.endDate) + 1;
                let min = parseInt(this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine);
                let max = parseInt(this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.maxDeadLine);
                let isYear = this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].isYear;
                this.isYear = isYear;
                if (min > day || max < day) {
                    if (isYear) {
                        this.PeriodDto.endDate = DateUtil.getDateInsure(this.PeriodDto.startDate);
                    } else {
                        this.PeriodDto.endDate = DateUtil.getDateAfterOfDay(this.PeriodDto.startDate, min - 1);
                    }
                    day = DateUtil.DateDiff(this.PeriodDto.startDate, this.PeriodDto.endDate);
                }

                this.deadline = day;
                if (isNaN(this.deadline)) {
                    this.deadline = this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.maxDeadLine;
                }
                if (this.selePlanId != "") {
                    this.queryPlan("plan");
                }
            } catch (e) {
                console.log("min");
            }
        },
        changeBirTime(val) {
            // let test = this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId];
            if (this.birthTime != "") {
                this.age = DateUtil.jsGetAge(this.birthTime);
                this.queryPlan("plan");
            }
        },
        //选择保险介绍标签自动定位内容
        selectedTab(item_index) {
            //tab选项卡高度
            let tabHeight = 44;
            //获取选中项对应的显示元素dom
            let divObj = document.getElementById("details_card_image");
            if (typeof divObj != "undefined") {
                let imgItem = divObj.children[item_index];
                //$('.details__cards div').eq(item_index);
                //滚动元素到指定距离
                document.body.scrollTop = imgItem.offsetTop - tabHeight;
                //切换选项
                this.index = item_index;
            }
        },
        //滚动保险内容自动定位介绍标签选项卡
        scrollToImg(_this) {
            let divObj = document.getElementById("details_card_image");
            if (divObj != null && typeof divObj != "undefined") {
                let cards = divObj.children;
                //tab选项卡高度
                let tabHeight = 44;
                for (var item_index = 0; item_index < cards.length; item_index++) {
                    //每个选项内容模块距离页面顶部小于0则切换相应tab选项
                    var item_Top =
                        cards[item_index].offsetTop - document.body.scrollTop - tabHeight;
                    if (item_Top <= 0) {
                        _this.index = item_index;
                    }
                }
            }
        },
        //初始化保险期限
        initPolicyDeadline(_this) {
            setTimeout(function () {
                _this.birthTime = DateUtil.getNowDateStr_Ymd();
                _this.PeriodDto.startDate = DateUtil.getDateTomorrow(1);
                // _this.PeriodDto.endDate = DateUtil.getDateAfterOfDay(
                //     _this.PeriodDto.startDate,
                //     _this.detailsStore.indexData.maxDeadLine - 1
                // );
                // setTimeout(function() {
                //     let test = _this.PeriodDto.endDate;
                // }, 1000);

                _this.PeriodDto.startHour =
                    typeof temp_periodDto != "undefined" &&
                        temp_periodDto.startHour != null
                        ? temp_periodDto.startHour
                        : "0";
                _this.PeriodDto.endHour =
                    typeof temp_periodDto != "undefined" && temp_periodDto.endHour != null
                        ? temp_periodDto.endHour
                        : "24";
            }, 0);
            setTimeout(function () {
                _this.changeStartEndTime(_this.PeriodDto.endDate);
            }, 500);
        },
        //初始化保险图片信息
        initPage(_this) {
            this.thumbnail[0].url = "javascript:void(0)";
            this.thumbnail[0].img = this.saveInsure.indexData.imgThumbnailUrl;
            this.thumbnail[0].title = this.saveInsure.indexData.productCname;
        },
        // new 
        initQuery(type, data) { // new 
        },
        //初始化旅行险的生日选择日期
        initAgeDate() {
            //2726=旅行险,2725=个意险,3105=家财险
            // if (this.saveInsure.indexData.riskCode == "2726") {
            //     let ageNo = this.saveInsure.indexData.maxAge;
            //     this.sDate = DateUtil.getDateyMdSubtract(ageNo);

            // }
            this.startEndEndData = DateUtil.getDateTomorrow(this.saveInsure.indexData.advanceDay);
        },
        //微信分享关闭遮罩
        shareHide() {
            this.weChatShade = false;
            //启用滚动
            $("body").css("overflow-y", "auto");
        },
        //显示百度分享
        shareShow() {
            if (localStorage["IS_WE_CHAR"] == "T") {
                //微信
                this.weChatShade = true;
                $("body").css("overflow-y", "hidden");
            } else {
                this.$common.saveShare("二维码", this, 5);
                this.isShowShare = true;

                //百度分享打开
                // this.showBaiduShare = true;
            }
        },
        //初始化分享信息
        initShare() {
            //分享地址初始化
            // let urlParm = { isLogin: this.user.isLogin, id: this.saveInsure.indexData.id, shareId: this.shareUuid };
            // let shareUrl = window.location.href.split('?')[0] + this.$common.getShareUrl(this, urlParm);
            // alert(this.shareUuid);
            let parmList = [];
            if (this.$common.isEmpty(this.saveInsure.shareUid)) {
                // debugger
                if (this.$common.isNotEmpty(this.saveInsure.refShareUUid) && this.saveInsure.refereeData != false && (this.saveInsure.refereeData.storeFlag == "1" || this.saveInsure.refereeData.storeFlag == 1)) {
                    console.log('--');
                    sessionStorage["SHARE_COMMON_TYPE"] = "REF";
                    let urlParm = {
                        key: Url_Key.SHARE_UUID,
                        value: this.saveInsure.refShareUUid
                    }
                    parmList.push(urlParm);
                    this.isShop = true;
                } else {
                    console.log('---');
                    sessionStorage["SHARE_COMMON_TYPE"] = "USER";
                    if (this.user.isLogin) {
                        let uuid = this.$encode.hex_md5(this.user.userDto.userCode + ":1");
                        this.$common.storeCommit(this, Mutations.SET_SHARE_UUID, uuid);
                    }
                    let urlParm = {
                        key: Url_Key.SHARE_UUID,
                        value: this.shareUuid
                    }
                    parmList.push(urlParm);
                }
                let urlPro = {
                    key: Url_Key.PRODUCT_ID,
                    value: this.saveInsure.indexData.id
                }
                parmList.push(urlPro);
            } else {
                parmList = this.$common.setUidShareParm(this);
                let urlPro = {
                    key: Url_Key.PRODUCT_ID,
                    value: this.saveInsure.indexData.id
                }
                parmList.push(urlPro);
            }
            let shareUrl = RequestUrl.BASE_URL + RouteUrl.DETAILS + this.$common.setShareUrl(parmList);
            console.log(shareUrl);
            //分享初始数据
            let imgUrl = this.saveInsure.indexData.imgUrl;
            if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
                //补全产品的图片路径
                imgUrl = RequestUrl.WEB_PATH + imgUrl;
            }
            // let userCode = "";
            // if (this.user.isLogin) {
            //     userCode = this.user.userDto.userCode;
            // }
            // alert(this.saveInsure.indexData.productCname);
            // alert(this.saveInsure.indexData.descrition);
            // alert(imgUrl);
            // alert(shareUrl);
            // shareUrl = encodeURIComponent(shareUrl);
            let weChatData = {
                _this: this,
                shareData: {
                    title: this.saveInsure.indexData.productCname,
                    desc: this.saveInsure.indexData.descrition,
                    imgUrl: imgUrl,
                    url: shareUrl,
                    _this: this,
                    type: 5
                }
            };
            this.shopShareUrl = shareUrl;
            // 微信分享
            SharePage.weChatShare(weChatData);
            share.shareInit(weChatData);
            // 百度分享
            // SharePage.baiduShare(weChatData);
        },
        onlineClick() {
            // onlineCustomerService.onlineClickOfMobile(this, '4008882008');
            //触发index.html在线客服按钮的click事件，IOS系统在使用.native修饰符时，需要调用2次才能触发到click
            if (localStorage["BOTYPE"] == "I") {
                $(".zhiCustomBtn").trigger("click");
                $(".zhiCustomBtn").trigger("click");
            } else {
                $(".zhiCustomBtn").trigger("click");
            }
        },
        queryPlan(type) {
            // debugger
            let deadline = this.deadline;
            let age = this.age;
            if (!this.isShowBirthTime) {
                age = this.detailsStore.curSelePlan.minAge;
            }
            let userCode = "";
            if (this.user.isLogin) {
                userCode = this.user.userDto.userCode;
            }
            if (type == "plan") {
                if (this.$common.isNotEmpty(this.saveInsure.indexData.id) && this.$common.isNotEmpty(this.selePlanId)) {
                    let min = this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine;
                    if (deadline < min) {
                        deadline = min;
                    }
                }
            }
            // debugger
            if (this.isImm) {
                deadline = deadline - 1;
                if (deadline < 1) {
                    deadline = this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine
                }
            }

            // if (isNaN(deadline) && deadline < 1) {
            //     deadline = this.detailsStore.productData[this.saveInsure.indexData.id][this.selePlanId].salePlan.minDeadLine
            // }
            // debugger
            let queryPlan = {
                type: type,
                _this: this,
                productId: this.saveInsure.indexData.id,
                planId: this.selePlanId,
                age: age,
                deadline: deadline,
                index: "",
                userCode: userCode
            }

            if ((type == "plan" && this.detailsStore.isQuery) || type == "product") {
                this.$common.storeCommit(this, "DETAILS_TEST", queryPlan);
            }
        },
    },
    beforeRouteEnter(to, from, next) {
        // sessionStorage["DETAILS_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        // //根据URI参数初始化数据，必须放在最前面执行
        this.initURIParameters();
    },
    //挂载
    mounted() {
        // alert(1);
        // let i = 0;
        // i.push();
        // this.getStartHour();
        document.title = '产品详情';
        //初始化，没有footer
        this.$init.subPageInit(this);

        //初始化保险期限
        this.initPolicyDeadline(this);
        //产品图片
        this.initPage(this);
        //初始化旅行险的生日选择日期
        this.initAgeDate();
        if (!this.$common.isEmpty(this.saveInsure.indexData.id)) {
            localStorage["INDEX_ID_LOCAL"] = this.saveInsure.indexData.id;
        }
        // localStorage["INDEX_DATA_JSON_LOCAL"] = JSON.stringify(this.saveInsure.indexData);

        this.queryPlan('product');

        this.$common.storeCommit(this, Mutations.SET_SHOW_ELE, this);
        //滚动页面自动切换tab
        let _this = this;



        try {
            window.onscroll = function () {
                _this.scrollToImg(_this);
            };
        } catch (e) {
            console.log(1);
        }

        if (this.saveInsure.indexData.maxDeadLine - this.saveInsure.indexData.minDeadLine <= 1) {
            this.dealineIsFixed = true;
        }
        if (this.saveInsure.indexData.riskCode != "2726") {
            this.initQuery('init');
        }
        if (this.isInitData) {
            //初始化分享
            this.initShare();
        }

        //初始化在线客服内容
        let imgUrl = this.saveInsure.indexData.imgUrl;
        if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
            //补全产品的图片路径
            imgUrl = RequestUrl.WEB_PATH + imgUrl;
        }
        let data = {
            product: {
                title: this.saveInsure.indexData.productCname,//标题 必传
                desc: this.saveInsure.indexData.descrition, //摘要
                url: window.location.href, //链接 必传
                label: this.saveInsure.indexData.minPrice + "起", //标签
                imgUrl: imgUrl, //图片
            },
            user: ""
        }
        if (this.user.isLogin) {
            data.user = this.user.userDto;
        }
        //远程加载在线客服js
        onlineCustomerService.initJsFile(this, data);
    },
    beforeDestroy() {
        // let parmm = {
        //     productId: this.saveInsure.indexData.id,
        //     seleId: this.selePlanId,
        //     isAbroadTravel: this.saveInsure.eleShow.abroadDestination,
        //     _this: this
        // }
        // this.$common.storeCommit(this, "DETAILSS_SAVE_TEST1", parmm);

        let parm = {
            selePlanList: this.selePlanList,
            periodDto: this.PeriodDto,
            birthday: this.birthTime,
        }

        this.$store.commit(Mutations.SAVE_INSURE_DEFAULT_SAVE, parm);
        this.saveData();
    }
};
</script>

<style lang="scss" scoped>
.tab-swiper {
  background-color: red;
  color: white;
  height: 100px;
}

.details {
  padding-bottom: 60px;
}

.details__grouplist {
  margin-left: 4%;
  margin-right: 4%;
}

.details__number {
  color: #c8161d;
  font-size: 15px;
  font-weight: bolder;
}

.details__number--smallsize {
  font-size: 12px;
}

.details__masker {
  border-radius: 2px;
  height: 190px;
}

.details_sticky {
  height: 44px;
}

.details__cards {
  background-color: #fff;
  width: 100%;
  padding: 10px 0px;
  img {
    width: 95%;
    margin: 0px auto;
    display: block;
    margin-top: 2px;
  }
  span {
    display: block;
    width: 100%;
    text-align: center;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    padding: 5px 0px;
  }
}
.details-alert {
  color: #c8161d !important;
  font-size: 14px !important;
}
.weui-cell {
  border-bottom: 1px solid #e7e7e7;
}

.details__introduce {
  background-color: #fff;
}

.box2-wrap {
  height: 300px;
  overflow: hidden;
}

.details__dialog--btnlist {
  padding: 10px 15px; //   width: max-content;
  max-width: 750px;
  text-align: left;
}

.details-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
  margin: 0px 3px;
  font-size: 14px;
  margin-top: 5px;
}

.details-item-selected {
  border: 3px solid #c8161d;
  border-radius: 3px; // background: #ffffff url(~assets/x3/ico/selected_options.png) no-repeat right bottom; //   margin: 0 auto;
  //   border-left: 1px solid red;
  //   border-bottom: 1px solid red;
  //   transform: rotate(-45deg);
  //   -ms-transform: rotate(-45deg);
  //   -moz-transform: rotate(-45deg);
  //   -webkit-transform: rotate(-45deg);
  //   -o-transform: rotate(-45deg);
}

.details__header--bg {
  background: white;
}

.details__header {
  background-image: url(https://static.vux.li/demo/1.jpg);
}

.income__header {
  background-color: white transparent !important;
  img {
    position: absolute;
    top: -3px;
  }
}

.vux-masker {
  background-color: transparent !important;
}

.details__introduce--explain {
  padding: 10px 20px;
  word-wrap: break-word;
  border-bottom: 1px solid #e7e7e7;
}

.details__introduce_tab_a {
  display: block;
  width: 100%;
  height: 100%;
}

.details__footer_sub {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
  }
  span {
    display: block;
    float: left;
    width: 1px;
    height: 30px;
    margin-top: 10px;
    border-left: 1px solid #cfcfcf;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.details__footer_sub_left {
  float: left;
  width: 50%;
  padding: 5px 0px;
  div {
    float: left;
    height: 80%;
    width: 49%;
  }
  img {
    display: block;
    margin: 5px auto;
    width: 30px;
    height: auto;
  }
}

.details__footer_sub_left .service {
  border-right: 1px solid #cfcfcf;
}

.details__footer_details_rigth {
  border: 0px;
  width: 50%;
  height: 100%;
  line-height: 47px;
  float: left;
  background: #c8161d;
  color: white;
  font-size: 18px;
  text-align: center;
}

.details__footer {
  font-size: 0px;
  bottom: 0px;
  margin: 0px;
  position: fixed;
  width: 100%;
}

.details__btn {
  position: relative; //置底边缘
  z-index: 5; //向上层级
  color: white;
  width: 100%;
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0px 0px 10px 1px #efefef;
}

.details__leftbtn {
  font-size: 16px;
  width: 50%;
  height: 100%;
  float: left;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
    font-size: 20px;
  }
}

.details__rightbtn {
  width: 50%;
  height: 100%;
  float: left;
  background: #c8161d;
  color: white;
  font-size: 18px;
}

.details__list--right {
  font-size: 12px;
  color: #828282;
}

.weui-actionsheet {
  left: auto !important;
  width: 100%; //
}

.details__dialog--datatime {
  border-top: 1px solid #e7e7e7;
  padding-bottom: 30px;
}

.weui-cell:before {
  border-top: 1px solid #fff !important;
}

.details__dialog--rangeTime {
  color: #7f7f7f;
  font-size: 15px;
}

.details__dialog--birthday {
  color: #7f7f7f;
  font-size: 15px;
}

//-----------------------------微信分享遮罩提示
// .weChatShadeDiv {
//   //-webkit-user-select: none;
//   position: fixed;
//   width: 100%;
//   height: 100%;
//   background: rgba(0, 0, 0, 0.6); //透明度,小透明
//   text-align: center;
//   top: 0;
//   left: 0;
//   z-index: 501;
//   img {
//     max-width: 80%;
//   }
// }

// .details__arrow {
//   position: absolute;
//   right: 10%;
//   top: 5%;
// }

// .follow p {
//   margin-top: 380px;
//   color: white;
//   font-size: 24px;
// }

//-----------------------------微信分享选项
.details__weixinShare_title {
  height: 30px;
  line-height: 30px;
  margin: 0px auto;
  padding-left: 10px;
  font-size: 14px;
  background-color: #efefef;
}

.details__weixinShare {
  width: 90%;
  height: 50px;
  margin: 0px auto;
  padding: 10px;
  background-color: white;
  a {
    margin-right: 15px;
  }
}
</style>
